<template>
	<div class="login_container">
		<van-nav-bar
		  title="登陆/注册"
		  left-arrow
		  @click-left="$router.back()"
		  class="app-nav-bar"
		/>
		<!-- 登陆表单 -->
		<!-- 表单验证
			1.使用vant-form 组件包裹所有表单项 van-field
			2.绑定submit事件
			3.只有表单验证通过时，他才会调用submit
			4.使用field的rules检验规则
			validate-first 是否在某一项校验不通过时停止校验
		 -->
		<van-form 
		@submit="onLogin" 
		@failed="onFailed" 
		:show-error="false" 
		:show-error-message="false"
		validate-first 
		ref="login_form"
		>
		  <van-field
		    v-model="user.mobile"
			class="iconfont"
			icon-prefix="icon"
		    left-icon="shouji"
		    placeholder="请输入手机号"
			:rules="formRules.mobile"
			name="phone"
		  />
		  <van-field
		    v-model="user.code"
			class="iconfont"
		    icon-prefix="icon"
		    left-icon="yanzhengma"
		    placeholder="请输入验证码"
			:rules="formRules.code"
		  >
			<template #button>
				<van-count-down v-if="isCountDownShow" :time="time" format=" ss s" @finish="isCountDownShow=false"/>
			    <van-button 
					size="small" 
					class="send-btn" 
					@click.prevent="handleSendMs" 
					round
					:loading="isSendSmsLoading"
					v-else="isCountDownShow"
					>发送验证码</van-button>
			</template>
		  </van-field>
		  <div class="login-btn-wrap">
		  	<van-button class="login-btn" type="info" native-type="submit" block>登陆</van-button>
		  </div>
		</van-form>
	</div>
</template>

<script>
	//13911111111 246810
	import {login,sendMs} from '@/api/user'
	import {Toast} from 'vant'
	export default {
		name:'loginIndex',
		data(){
			return {
				user:{
				  mobile:'',//手机号
				  code:''//验证码
				},
				formRules:{
					//正则校验
					mobile:[{required:true,message:'请输入手机号'},{pattern:/^1[3|5|7|8|9]\d{9}$/,message:'手机格式错误'}],
					code:[{required:true,message:'请输入验证码'}]
				},
				isSendSmsLoading: false,
				//控制是否展示倒计时
				isCountDownShow: false,
				time:1000*60
			}
		},
		methods:{
			async onLogin(){
				Toast.loading({
				  message: '加载中...',
				  forbidClick: true,
				  duration:0
				})
				try{
					const {data} = await login(this.user)
					//将后端返回的用户登录状态（token等数据）放到 Vuex 容器中
					this.$store.commit('setUser',data)
					Toast.success('登陆成功')
					// 把layout的缓存清除掉，让他重新渲染
					this.$store.commit('removeCachePages','layout')
					// this.$router.back 这个方法存在缺陷 假如我不是从app中的任意一个页面来的，那么登陆后就会跳转到别的网站，例如百度
					// this.$router.back()
					// 因此 正取的方法时先记录原来的页面，登陆成功的时候就跳转到记录好的页面
					this.$router.push(this.$route.query.redirect||'/')
				}catch(e){
					Toast.fail('登录失败')
				}
				
			},
			onFailed(error){
				if(error.errors[0]){
					this.$toast({
						message:error.errors[0].message,
						position:'top'
					})
				}
			},
			async handleSendMs(){
				try{
					// validate 是一个promise对象
					await this.$refs.login_form.validate('phone')
					this.isSendSmsLoading = true // 展示按钮的 loading 状态，防止网络慢用户多次点击触发发送行为
					this.isCountDownShow = true
					await sendMs(this.user.mobile)
					
					// console.log(res)
				}catch(err){
					let message = ''
					if(err&&err.response&&err.response.status == 402){
						message = '发送太频繁了，请稍后重试'
					}else if(err.name=="phone"){
						message = err.message
					}else{
						message="未知的错误"
					}
					this.$toast({
						message:err.message,
						position:'top'
					})
					// 发送失败，显示发送按钮，关闭倒计时
					this.isCountDownShow = false
				}
				this.isSendSmsLoading = false
				
			}
		}
	}
</script>

<style scoped lang="less">
	.login_container{
		.login-btn-wrap{
			padding: 26px 16px;
			.login-btn{
				background-color:#6db4fb;
				border:none;
				.van-button__text{
					font-size:15px;
				}
			}
		}
		.send-btn{
			width:80px;
			height:23px;
			background-color: #ededed;
			line-height: 23px;
			.van-button__text{
				color:#666;
				font-size:11px;
			}
		}
	}
	
</style>
